<template>
  <el-dialog
    title="工位选择"
    :visible.sync="dialogVisible"
    :modal="true"
    :appendToBody="true"
    width="60%"
    v-dialog-drag
    :close-on-click-modal="false"
    top="5vh"
    @close="handleClose()"
    @open="handleOpen()"
  >
    <div class="selected-content">
      <template v-if='selectionList.length'>
        <div v-for="item in selectionList" :key="item.workStationId" class="item">
          <span>{{ item.workStationName }}</span>
          <span class="del-item-btn" @click="handleDelSelection(item)"><i class="el-icon-close"></i></span>
        </div>
      </template>
    </div>

    <el-form :model="queryParams" :inline="true" ref="queryForm">
      <el-form-item prop='factoryDeptCode'>
        <el-select
          :disabled="disabledData.factory"
          v-model="queryParams.factoryDeptCode"
          placeholder="请选择工厂"
          size="small"
          :clearable="false"
          @change="handleFactory"
        >
          <el-option
            v-for="item in factoryList"
            :key="item.factoryDeptCode"
            :label="item.factoryName"
            :value="item.factoryDeptCode"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop='workshopCode'>
        <el-select
          :disabled="disabledData.workshop"
          v-model="queryParams.workshopCode"
          placeholder="请选择车间"
          size="small"
          :clearable="false"
          @change="handleWorkshop"
        >
          <el-option
            v-for="item in workshopList"
            :key="item.workshopCode"
            :label="item.workshopName"
            :value="item.workshopCode"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop='lineId'>
        <el-select
          :disabled="disabledData.line"
          v-model="queryParams.lineId"
          placeholder="请选择产线"
          size="small"
          :clearable="false"
          @change="handleProductionLine"
        >
          <el-option
            v-for="item in productionLineList"
            :key="item.lineId"
            :label="item.lineName"
            :value="item.lineId"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getUserList"
          >查询</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" v-if='isResetQuery' @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <TableSelect
      ref="table"
      :data="workStationList"
      :selectionList.sync="selectionList"
      :selectableCallBack="selectableCallBack"
      rowKey="workStationId"
      v-loading="tableLoading"
    >
      <el-table-column
        type="index"
        label="序号"
        width="60"
        align="center"
      ></el-table-column>
      <el-table-column
        label="工位编码"
        align="center"
        prop="workStationCode"
      ></el-table-column>
      <el-table-column
        label="工位名称"
        align="center"
        prop="workStationName"
      ></el-table-column>
      <el-table-column
        label="工位描述"
        align="center"
        prop="workStationDesc"
      ></el-table-column>
      <el-table-column
        label="所属工厂"
        align="center"
        prop="workshopName"
      >
        <template slot-scope="scope">
          <span>{{commonDate.factoryName}}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="所属车间"
        align="center"
        prop="workshopName"
      >
        <template slot-scope="scope">
          <span>{{commonDate.workshopName}}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="所属产线"
        align="center"
        prop="erpProductionLineName"
      >
        <template slot-scope="scope">
          <span>{{commonDate.lineName}}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column
        label="所属工段"
        align="center"
        prop="workSectionName"
      >
        <template slot-scope="scope">
          <span>{{commonDate.workSectionName}}</span>
        </template>
      </el-table-column> -->
    </TableSelect>
    <pagination
      :total="pager.total"
      :page.sync="pager.pageNum"
      :limit.sync="pager.pageSize"
      @pagination="getUserList"
    />
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="beSureSelect()">保 存</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { listAllFactorys } from "@/api/factory";
import { getUserList } from "@/api/system/user";
import TableSelect from "@/components/TableSelect";
import organizationCascader from "@/views/components/organizationCascader";
import {mapGetters } from "vuex";
export default {
  props: {
    visibles: {
      type: Boolean,
      default: false,
    },
    // 不可选回调，返回true或false，传参为user
    selectableCallBack: {
      type: Function,
    },
    // 是否多选
    multiple: {
      type: Boolean,
      default: false,
    },
    //工厂，车间，产线等id和code
    arrData:{
      type:Object,
      default:()=>{}
    },

    // 默认展示已经选中的工位
    defaultValues: {
      type: Array,
      default: () => [],
    },

    //当前筛选条件是否支持更改
    disabledData: {
      type: Object,
      default: () => ({
        factory:false,
        workshop:false,
        line:false,
        workSection:false
      })
    },
    //是否显示重置按钮
    isResetQuery:{
      type:Boolean,
      default:true
    },
    isAllList:{
      type:Boolean,
      default:true
    }
  },
  data() {
    return {
      queryParams: {
        factoryDeptCode: null,
        workshopCode: null,
        lineId: null
      },
      //用于调用的父组件获取数据
      commonDate:{
        factoryDeptId: null,
        factoryName: null,
        workshopId: null,
        workshopName: null,
        lineCode: null,
        lineName: null,
        workStationId: null,
        workStationName: null
      },
      factoryList:[],     //工厂
      workshopList:[],
      productionLineList:[],
      workSectionList:[],   //工段
      workStationList:[],   //工位
      tableLoading: false,
      pager: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
      selectionList: []
    };
  },

  computed: {
    dialogVisible: {
      set(val) {
        this.$emit("update:visibles", val);
      },
      get() {
        return this.visibles;
      },
    },
    ...mapGetters([
      'permitList',
      'allList'
    ])
  },

  methods: {
    handleOpen() {
      // 默认搜索条件
      const {factoryDeptCode,workshopCode,lineId} = this.arrData;
      this.queryParams = {
        factoryDeptCode,
        workshopCode,
        lineId
      };
      this.selectionList = this.defaultValues?.length ? [...this.defaultValues] : [],
      this.getUserList();
    },

    // 获取工厂，车间，产线，工位数据
    getUserList() {
      if(this.isAllList){
        this.factoryList = [...this.allList] || [];
      }
      else{
        this.factoryList = [...this.permitList] || [];
      }
      if(this.queryParams.factoryDeptCode){//当默认回填工厂信息时，自动获取车间数据
        this.handleFactory(this.queryParams.factoryDeptCode,"init")
      }
      if(this.queryParams.workshopCode){//当默认回填车间信息,自动获取产线数据
        this.handleWorkshop(this.queryParams.workshopCode,"init")
      }
      if(this.queryParams.lineId){//当默认回填产线信息,自动获取工位数据
        this.handleProductionLine(this.queryParams.lineId,"init")
      }
    },

    handleDelSelection(item) {
      if (!item) {
        return
      }
      if (this.$refs.table) {
        this.$refs.table.handleDelSelection(item);
      }
    },

    beSureSelect() {
      const selection = this.selectionList;
      // const selection = this.$refs["table"]?.selection
      if (!this.multiple) {
        if (selection.length > 1) {
          this.$message({
            message: "最多选择一条数据!",
            type: "warning",
          });
          return;
        }
      }
      this.$emit("closeDialog", selection || []);
      this.dialogVisible = false;
    },

    //选择工厂,获取车间数据
    handleFactory(val,key){
      const factoryItem = this.factoryList.find(ele => ele.factoryDeptCode === val);
      this.workshopList = factoryItem?.workshopVos ? factoryItem?.workshopVos : [];
      this.commonDate.factoryDeptId = factoryItem?.factoryDeptId;
      this.commonDate.factoryName = factoryItem?.factoryName;
      if(key !== "init"){//改变下拉框数据
        this.queryParams.workshopCode = null;
        this.queryParams.lineId = null;
      }
    },

    //选择车间,获取产线数据
    handleWorkshop(val,key){
      const workshopItemn = this.workshopList.find(ele => ele.workshopCode === val);
      this.productionLineList = workshopItemn?.productionLineVos ? workshopItemn?.productionLineVos : [];
      this.commonDate.workshopId = workshopItemn?.workshopId;
      this.commonDate.workshopName = workshopItemn?.workshopName;
      if(key !== "init"){
        this.queryParams.lineId = null;
      }
    },

    //选择产线,获取工位
    handleProductionLine(val,key){
      const productionLineItem = this.productionLineList.find(ele => ele.lineId === val)
      this.workStationList = productionLineItem?.workStationVos || [];
      this.commonDate.lineCode = productionLineItem?.lineCode;
      this.commonDate.lineName = productionLineItem?.lineName;
      this.pager.total = this.workStationList?.length || 0;
    },

    handleClose() {
      this.queryParams = {
        factoryDeptCode: null,
        workshopCode: null,
        lineId: null
      };
      this.commonDate = {
        factoryDeptId: null,
        factoryName: null,
        workshopId: null,
        workshopName: null,
        lineCode: null,
        lineName: null,
        workStationId: null,
        workStationName: null
      },
      this.factoryList = [];    //工厂
      this.workshopList = [];
      this.productionLineList = [];
      this.workStationList = [];   //工位
      this.selectionList = [];
      this.tableLoading = false;
      this.pager.total = 0;
      this.pager.pageNum = 1;
    },

    //重置
    resetQuery() {
      this.pager.pageNum = 1;
      this.resetForm("queryForm");
      this.getUserList();
    },
  },
  // watch:{
  //   arrData:{
  //     handler(newVal){
  //       this.queryParams = newVal;
  //       console.log(this.queryParams,"fdfdfdfdf")
  //     },
  //     deep: true,
  //     immediate: true
  //   }
  // },
  components:{
    organizationCascader,
    TableSelect
  }
};
</script>
<style lang="scss" scoped>
.selected-content {
  width: 100%;
  height: 88px;
  padding: 10px;
  border: 1px solid #dfe6ec;
  margin-bottom: 20px;
  overflow-y: auto;
  .item {
    height: 28px;
    line-height: 28px;
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 0 10px;
    font-size: 14px;
    display: inline-block;
    vertical-align: middle;
    background: rgb(234, 248, 254);
    color: #409eff;
    .del-item-btn {
      margin-left: 10px;
      cursor: pointer;
    }
  }
}
::v-deep {
  .el-dialog .el-dialog__body {
    padding-top: 10px;
  }
  .el-form-item {
    margin-bottom: 15px;
  }
}
</style>
